<template>
<div>
    <actionsheet 
        ref = 'demoObject'
        v-model="show" 
        :menus="menus" 
        show-cancel 
        @on-click-menu="exitClick"
    ></actionsheet>
    <div id="top">
        <x-header 
            :left-options="{showBack: !navbarShow}"
            :right-options="{showMore: true}" 
            @on-click-more="show = true"
            :transition="aniType"
        >{{title}}</x-header>
    </div>
    <div style="height:40px"></div>

    <transition :name="aniType">
        <keep-alive>
            <router-view @title='titleA'></router-view>
        </keep-alive>
    </transition>
    
    
    <div style="height:200px" v-show='navbarShow'></div>
    <transition :name="aniType">
        <Navbar v-show='navbarShow'></Navbar>
    </transition>
    
</div>
</template>


<script>
import { XHeader ,Actionsheet ,Checklist ,XButton ,Divider} from 'vux';
import Navbar from '../components/Navbar.vue';
export default {
    data(){
        return {
            title:"签 到",
            
            show:false,     // 遮罩层
            
            menus:{
                m3:"更换头像(暂无)",
                m2:"更换密码(暂无)",
                m1:"退出登录"
            },
            aniType:'',     // 监听是否有动画
            navbarShow:false,   // 是否有navbar
        }
    },
    components:{
        XHeader,Actionsheet, Checklist ,XButton ,Divider,Navbar
    },
    methods:{
        // 改变title
        titleA(e){
            this.title = e;
        },
        // 退出
        exitClick:function(e,k){
            if(e==='m1'){
                $.get('/users/exit')
                .done(data=>{
                    location.href = '#/login';
                    this.$vux.toast.text(data.msg);
                })
            }
            if(e==='m2'){
                this.$router.push('users/psaaword');
            }
            if(e==='m3'){
                this.$router.push('users/head');
            }
        },
        
    },
    created(){
        
        if(this.$route.path.split('/').length===2){
            this.navbarShow = true;
        }else{
            this.navbarShow = false;
        }
    },
    watch:{
        $route(nv,ov){
            var nLen = nv.path.split("/").length - 1;
            var oLen = ov.path.split("/").length - 1;
            if (nLen > oLen) {
                this.aniType = "pagein";
            } else if (nLen < oLen) {
                this.aniType = "pageout";
            } else {
                this.aniType = "";
            }
            if(nLen>1){
                this.navbarShow = false;
            }else{
                this.navbarShow = true;
            }
        }
    }
}
</script>


<style scoped>
#top{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}
</style>